<template>
    <div class="main">
        <Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts"/>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: ['childMessage'],
    data() {
        return {
            pageflag: true,
            xData2: ["特别活动", "专业活动", "校馆联合活动", "师生活动", "亲子活动"],
            data1: [260, 200, 130, 150, 200],
            data2: [400, 400, 400, 400, 400],
            barWidth: 20,
            options: {},
        }
    },
    created() {
    },
    mounted() {

        this.xData2 = [];
        this.data1 = [];
        this.data2 = [];
        this.childMessage.forEach((item,index)=>{
            this.xData2.push(item.name);
            this.data1.push(item.valule);
        })

        // 获取数组中的最大值
        const max = Math.max(...this.data1);
        this.data1.forEach(num => {
            this.data2.push((max % 10 + 5) * 10)
        });

        this.options = {
            // backgroundColor: "#021132",
            tooltip: {
                trigger: "item",
            },
            grid: {
                top: 50,
                left: 120,
                right: 5,
                bottom: 40,
            },
            xAxis: {
                data: this.xData2,
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: "#fff",
                        fontSize: 12,
                    },
                    margin: 16, //刻度标签与轴线之间的距离。
                },
            },
            yAxis: {
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.1)", // 设置颜色为白色，并设置透明度为 0.5
                        type: "solid", // 设置为实线
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: "#fff",
                        fontSize: 16,
                    },
                },
            },
            series: [
                {
                    // 上半截柱子
                    name: "2019",
                    type: "bar",
                    barWidth: this.barWidth,
                    barGap: "-100%",
                    z: 0,
                    itemStyle: {
                        color: "#4e6883",
                        opacity: 0.7,
                    },
                    tooltip: {
                        show: false, // 将show属性设置为false
                        // ...
                    },
                    data: this.data2,
                },
                {
                    //下半截柱子
                    name: "2020",
                    type: "bar",
                    barWidth: this.barWidth,
                    barGap: "-100%",
                    itemStyle: {
                        //lenged文本
                        opacity: 0.7,
                        color: function (params) {
                            return new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: "#8ab9e3", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#123763", // 100% 处的颜色
                                    },
                                ],
                                false
                            );
                        },
                    },
                    data: this.data1,
                },
                {
                    // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
                    type: "bar",
                    barWidth: this.barWidth,
                    barGap: "-100%",
                    stack: "广告",
                    itemStyle: {
                        color: "transparent",
                    },
                    data: this.data1,
                },
                {
                    //上半截柱子顶部圆片
                    name: "",
                    type: "pictorialBar",
                    symbolSize: [this.barWidth, 10],
                    symbolOffset: [0, -5],
                    z: 12,
                    symbolPosition: "end",
                    // itemStyle: {
                    //     color: "#163F7A",
                    //     opacity: 1,
                    // },
                    itemStyle: {
                        //lenged文本
                        opacity: 1,
                        color: function (params) {
                            return new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: "#99c2e5", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#527aa2", // 100% 处的颜色
                                    },
                                ],
                                false
                            );
                        },
                    },
                    label: {
                        show: false,
                        position: "top",
                        fontSize: 16,
                        color: "#fff",
                    },
                    data: this.data2,
                },
                {
                    //下半截柱子顶部圆片
                    name: "",
                    type: "pictorialBar",
                    symbolSize: [this.barWidth, 10],
                    symbolOffset: [0, -5],
                    z: 12,
                    itemStyle: {
                        opacity: 1,
                        color: function (params) {
                            return new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: "#8dbde9", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#47749f", // 100% 处的颜色
                                    },
                                ],
                                false
                            );
                        },
                    },
                    label: {
                        show: true,
                        position: "top",
                        fontSize: 10,
                        color: "#fff",
                        // formatter:(item)=>{
                        //     console.log(item)
                        //     return 'ssss'
                        // }
                    },
                    symbolPosition: "end",
                    data: this.data1,
                },
                {
                    //下半截柱子底部圆片
                    name: "",
                    type: "pictorialBar",
                    symbolSize: [this.barWidth, 10],
                    symbolOffset: [0, 5],
                    z: 12,
                    itemStyle: {
                        opacity: 1,
                        color: function (params) {
                            return new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: "#002450", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#3c6289", // 100% 处的颜色
                                    },
                                ],
                                false
                            );
                        },
                    },
                    // data: [1, 1, 1],
                    data: this.data1,
                },
                // {
                //     name: "第一圈",
                //     type: "pictorialBar",
                //     symbolSize: [47, 16],
                //     symbolOffset: [0, 11],
                //     z: 11,
                //     itemStyle: {
                //         normal: {
                //             color: "transparent",
                //             borderColor: "#3ACDC5",
                //             borderWidth: 2,
                //         },
                //     },
                //     data: [1, 1, 1, 1, 1],
                // },
                // {
                //     name: "第二圈",
                //     type: "pictorialBar",
                //     symbolSize: [62, 22],
                //     symbolOffset: [0, 17],
                //     z: 10,
                //     itemStyle: {
                //         normal: {
                //             color: "transparent",
                //             borderColor: "#02c3f1",
                //             borderWidth: 2,
                //         },
                //     },
                //     data: [1, 1, 1, 1, 1],
                // },
            ],
        };
    },
    beforeDestroy() {

    },
    methods: {},
};
</script>
<style lang='scss' scoped>
.main {
    width: 100%;
    height: 280px;
    display: flex;
    flex-wrap: wrap;
}
</style>
